<extend name="common:commonTemplate" />
<block name="main_content">
<style type="text/css">
    #allmap {width: 100%;height: 100%;overflow: scroll;margin:0;font-family:"微软雅黑";}
</style>
<div id="content">
	<div id="content-header">
		<div id="breadcrumb">
			<a class="tip-bottom" href="index.html" data-original-title="Go to Home"><i class="icon-home"></i> 首页</a>
			<a class="current" href="#">地图测试</a>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<div class="widget-box">
					<div class="widget-title">
						<span class="icon"> <i class="icon-info-sign"></i>
						</span>
						<h5>搜索条件</h5>
					</div>
					<div class="widget-content nopadding">
						<form novalidate="novalidate" id="basic_validate"
							name="basic_validate" action="#" method="post"
							class="form-horizontal">
                  <!--           <div class="control-group">
                             <label class="control-label">省市区</label>
                             <div class="controls">
                                 <select id="province" name="province" style="width:280px"></select>
                                 <br/><br/>

                                 <select id="city" name="city" style="width:280px"></select>
                                 <br/><br/>
                                 
                                 <select id="district" name="district" style="width:280px"></select>
                             </div>
                            </div> -->
							
							<div class="control-group">
								<label class="control-label">选区轮廓名</label>
								<div class="controls">
									<input type="text" id="boundary_name" name="boundary_name"/>
								</div>
							</div>
							
							<div class="form-actions">
								<input id="btn_map_search" type="button" class="btn btn-success" value="搜索"/>
								<input id="btn_map_reset" type="button" class="btn btn-primary" value="重置"/>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	
	<div class="row-fluid">
      <div class="span12">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-map-marker"></i> </span>
            <h5>搜索结果</h5>
          </div>
          <div class="widget-content nopadding" style="height: 100%;">
           	 	<div id="allmap" style="height: 600px"></div>
          </div>
      </div>
    </div>
  </div>

</div>
</div>
</block>

<block name="js_content">
<script type="text/javascript" src="/Public/js/common.js?v=16"></script>
<script type="text/javascript" src="/Public/js/ajaxService.js?v=12"></script>
<script src="/Public/assets/js/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2edef618a627331a247df1113ec8a8b5"></script>




<script type="text/javascript">
	/* $(document).ready(function () {
	    $('#province').commonRegion({
	    	city:$('#city'),
	    	district:$('#district'),
	    	option_mode: 'NAME'
	   	});
	}); */
	var provinces = {}; 
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(108.3260, 34.153959), 6);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
    }));
    map.addControl(new BMap.NavigationControl()); 
    map.setCurrentCity("西安"); 
    map.enableScrollWheelZoom(true);
    map.enableContinuousZoom(true);
    //随机生成颜色
    function getRandomColor(){   
   	  return (function(m,s,c){   
   	    return (c ? arguments.callee(m,s,c-1) : '#') +   
   	      s[m.floor(m.random() * 16)]   
   	  })(Math,'0123456789abcdef',5)   
   	}; 
   	function getBoundary(name,color) {
        var boundary = new BMap.Boundary();
        boundary.get(name, function(rs){ 
        	if(rs.boundaries.length > 0){
		         //一个省可能有好几个闭合的多边形区域
		         var plys = new Array();
		         for (var i = 0; i < rs.boundaries.length; i++) {
		        	 var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: color,fillColor:color}); //建立多边形覆盖物
		             map.addOverlay(ply);  //添加覆盖物
		             plys.push(ply);
		         }  
		         provinces[name] = plys;
        	}else{
        		layer.msg('地理名称不合法', {icon: 5});
        	}
        }); 
    };
    //添加轮廓
    $('#btn_map_search').bind('click',function(){
    	var name = $('#boundary_name').val();
    	if(name != null && name != ''){
    		if(provinces[name] == null){
	    		getBoundary(name,getRandomColor());
    		}else{
    			layer.msg('该地理位置已标注', {icon: 5});
    		}
    	}
    });
    //重置
    $('#btn_map_reset').bind('click',function(){
    	$.each(provinces , function(i, plys){
    		$.each(plys , function(j, ply){
    			map.removeOverlay(ply); //移除覆盖物
    		});
   		});
    	provinces = {};
    });
    //逐个显示
    /* for (var i = provinces.length - 1; i >= 0; i--) {
        getBoundary(provinces[i]);
    }   */

</script>
</block>